<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <link rel="stylesheet" href="../static/css/admin.css">
</head>
<body>

<div class="layui-row layui-col-space15">
    <div class="layui-col-md8">
        <div class="layui-row layui-col-space15">
            <!--图标菜单开始-->
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">快捷方式</div>
                    <div class="layui-card-body">
                        <div class="layui-carousel lying-carousel lying-shortcut">
                            <div carousel-item>
                                <ul class="layui-row layui-col-space10">
                                    <li class="layui-col-xs3">
                                        <a lying-src="../component/addCinema.html" lying-title="添加影院" lying-icon="layui-icon-tupian">
                                            <i class="layui-icon layui-icon-website"></i>
                                            <cite>添加影院</cite>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs3">
                                        <a lying-src="../component/setHall.html" lying-title="设置影厅" lying-icon="layui-icon-tupian">
                                            <i class="layui-icon layui-icon-tupian"></i>
                                            <cite>设置影厅</cite>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs3">
                                        <a lying-src="../component/addMovie.html">
                                            <i class="layui-icon layui-icon-website"></i>
                                            <cite>添加影讯</cite>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs3">
                                        <a lying-src="../component/MovieOnShow.html">
                                            <i class="layui-icon layui-icon-website"></i>
                                            <cite>设置档期</cite>
                                        </a>
                                    </li>


                                </ul>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--图标菜单结束-->

            <!--待审事项开始-->
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">注意事项</div>
                    <div class="layui-card-body">
                        <div class="layui-carousel lying-carousel lying-backlog">
                            <div carousel-item>
                                <ul class="layui-row layui-col-space10">
                                    <li class="layui-col-xs6">
                                        <a class="lying-backlog-body" lying-src="">
                                            <h3>添加影片</h3>
                                            <p><cite>图片为外链</cite></p>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs6">
                                        <a class="lying-backlog-body" lying-src="">
                                            <h3>设置影厅</h3>
                                            <p><cite>01串表示座位布局</cite></p>
                                        </a>
                                    </li>

                                </ul>
                                <ul class="layui-row layui-col-space10">
                                    <li class="layui-col-xs6">
                                        <a class="lying-backlog-body" lying-src="">
                                            <h3>待审评论</h3>
                                            <p><cite>666</cite></p>
                                        </a>
                                    </li>

                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--待审事项结束-->


            <div class="layui-col-md12">
                <!--数据概览开始-->
                <div class="layui-card">
                    <div class="layui-card-header">数据概览</div>
                    <div class="layui-card-body">
                        <div class="layui-carousel lying-carousel lying-dataview">
                            <div carousel-item>
                                <div id="e1"></div>
                                <div id="e2"></div>
                                <div id="e3"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--数据概览结束-->

                <!--数据表格开始-->
                <div class="layui-card">
                    <div class="layui-card-body">
                        <div class="layui-tab layui-tab-brief">
                            <ul class="layui-tab-title">
                                <li class="layui-this">今日热搜</li>
                                <li>今日热帖</li>
                            </ul>
                            <div class="layui-tab-content">
                                <div class="layui-tab-item layui-show">
                                    <table id="hot-search"></table>
                                </div>
                                <div class="layui-tab-item">
                                    <table id="hot-article"></table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--数据表格结束-->

            </div>

        </div>
    </div>

    <div class="layui-col-md4">
        <!--版本信息开始-->
        <div class="layui-card">
            <div class="layui-card-header">版本信息</div>
            <div class="layui-card-body">
                <table class="layui-table">
                    <colgroup>
                        <col width="80">
                        <col>
                    </colgroup>
                    <tbody>
                    <tr>
                        <td>当前版本</td>
                        <td>v1.0.0</td>
                    </tr>
                    <tr>
                        <td>基于框架</td>
                        <td><a href="http://www.layui.com/" target="_blank">layui-v2.2.5</a></td>
                    </tr>

                    </tbody>
                </table>
            </div>
        </div>
        <!--版本信息结束-->

        <!--进度条开始-->
        <div class="layui-card">
            <div class="layui-card-header">效果报告</div>
            <div class="layui-card-body lying-takerates">
                <div class="layui-progress" lay-showPercent="yes">
                    <h3>转化率（日同比 28% <span class="layui-edge layui-edge-top"></span>）</h3>
                    <div class="layui-progress-bar" lay-percent="65%"></div>
                </div>
                <div class="layui-progress" lay-showPercent="yes">
                    <h3>转化率（日同比 28% <span class="layui-edge layui-edge-bottom"></span>）</h3>
                    <div class="layui-progress-bar" lay-percent="32%"></div>
                </div>
            </div>
        </div>
        <!--进度条结束-->

        <!--进度条开始-->
        <div class="layui-card">
            <div class="layui-card-header">实时监控</div>
            <div class="layui-card-body lying-takerates">
                <div class="layui-progress" lay-showPercent="yes">
                    <h3>CPU使用率</h3>
                    <div class="layui-progress-bar" lay-percent="58%"></div>
                </div>
                <div class="layui-progress" lay-showPercent="yes">
                    <h3>内存占用率</h3>
                    <div class="layui-progress-bar layui-bg-red" lay-percent="90%"></div>
                </div>
            </div>
        </div>
        <!--进度条结束-->

    </div>
</div>

</body>
<script src="../static/layui/layui.js"></script>
<script src="../static/js/echarts.min.js"></script>
<script>
    layui.config({base: '../static/js/'}).use(['admin', 'echartsTheme', 'table'], function() {
        var admin = layui.admin,
            $ = layui.$,
            layer = layui.layer,
            element = layui.element,
            carousel = layui.carousel,
            echartsTheme = layui.echartsTheme,
            table = layui.table;

        //实例化图表插件
        var e1 = echarts.init($('#e1').get(0), echartsTheme.layui),
            e2 = echarts.init($('#e2').get(0), echartsTheme.vintage),
            e3 = echarts.init($('#e3').get(0), echartsTheme.dark);
        e1.setOption({
            title: {
                text: '影片销售详情'
            },
            tooltip: {},
            legend: {
                data:['销量', '价格', '电影']
            },
            xAxis: {
                data: ["神奇女侠","速度激情","天天向上","头号玩家","高跟鞋","狂暴巨兽"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }, {
                name: '价格',
                data: [120, 200, 150, 80, 70, 110],
                type: 'bar'
            }, {
                name:'电影',
                type: 'bar',
                data:[120, 132, 101, 134, 90, 230]
            }]
        });
        e2.setOption({
            title: {
                text: '今日销量趋势',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap : false,
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                smooth: true,
                areaStyle: {normal: {}}
            }, {
                name:'电影',
                type:'line',
                stack: '总量',
                areaStyle: {normal: {}},
                data:[120, 132, 101, 134, 90, 230, 210]
            }, {
                name:'售价',
                type:'line',
                stack: '总量',
                areaStyle: {normal: {}},
                data:[220, 182, 191, 234, 290, 330, 310]
            }]
        });
        e3.setOption({
            title: {
                text: 'Customized Pie',
                left: 'center',
                top: 20,
                textStyle: {
                    color: '#ccc'
                }
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            visualMap: {
                show: false,
                min: 80,
                max: 600,
                inRange: {
                    colorLightness: [0, 1]
                }
            },
            series : [
                {
                    name:'访问来源',
                    type:'pie',
                    radius : '55%',
                    center: ['50%', '50%'],
                    data:[
                        {value:335, name:'直接访问'},
                        {value:310, name:'邮件营销'},
                        {value:274, name:'联盟广告'},
                        {value:235, name:'视频广告'},
                        {value:400, name:'搜索引擎'}
                    ].sort(function (a, b) { return a.value - b.value; }),
                    roseType: 'radius',
                    label: {
                        normal: {
                            textStyle: {
                                color: 'rgba(255, 255, 255, 0.3)'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            lineStyle: {
                                color: 'rgba(255, 255, 255, 0.3)'
                            },
                            smooth: 0.2,
                            length: 10,
                            length2: 20
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#c23531',
                            shadowBlur: 200,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },

                    animationType: 'scale',
                    animationEasing: 'elasticOut',
                    animationDelay: function (idx) {
                        return Math.random() * 200;
                    }
                }
            ]
        });

        //轮播图切换的时候重新渲染大小
        carousel.on('change()', function(obj) {
            var e = echarts.getInstanceByDom(obj.item.get(0));
            e && e.resize();
        });

        //窗口改变大小的时候重新渲染大小
        var resizeHandle;
        $(window).resize(function () {
            resizeHandle && clearTimeout(resizeHandle);
            resizeHandle = setTimeout(function () {
                var dom = $('.lying-carousel.lying-dataview').find('.layui-this');
                var e = echarts.getInstanceByDom(dom.get(0));
                e && e.resize();
            }, 50);
        });

        //今日热搜
        var hotSearch = table.render({
            elem: '#hot-search',
            url: '../static/data/hot-search',
            page: true,
            cols: [[
                {title: 'ID', width:40, type: 'numbers', fixed: 'left'},
                {field: 'keywords', title: '标题'},
                {field: 'frequency', title: '搜索次数', sort: true},
                {field: 'userNums', title: '用户数', sort: true}
            ]]
        });

        //今日热帖
        var hotArticle = table.render({
            elem: '#hot-article',
            url: '../static/data/hot-article',
            page: true,
            cols: [[
                {title: 'ID', width:40, type: 'numbers', fixed: 'left'},
                {field: 'title', title: '标题', templet: function (d) {
                    return '<a href="javascript:;" target="_blank" class="layui-table-link">' + d.title + '</a>';
                }},
                {field: 'username', title: '发帖者'},
                {field: 'channel', title: '类别'},
                {field: 'crt', title: '点击率', sort: true}
            ]]
        });

    });

</script>
</html>